<script setup>
import * as echarts from 'echarts';
import { ref, onMounted, watch } from 'vue';
import { queryJobCountApi, queryGenderCountApi } from '@/api/report'

// 创建图表容器的引用
const chartContainer = ref(null);
const pieChartContainer = ref(null); // 新增饼图容器
let jobsChart = null;
let pieChart = null;
const jobsData = ref([]);
const genderData = ref([]);

// 初始化柱状图
const initJobsChart = () => {
  // 确保DOM已经挂载后再初始化图表
  if (chartContainer.value && jobsData.value.length > 0) {
    jobsChart = echarts.init(chartContainer.value);
    
    const option = {
      title: {
        text: '员工职位统计',
        textStyle: {
          fontSize: 20,
          fontWeight: 'bold'
        },
        left: 'center',
        top: 10
      },
      tooltip: { // 更新tooltip配置
        trigger: 'item',
        backgroundColor: '#fff', // 背景颜色
        borderColor: '#ccc', // 边框颜色
        borderWidth: 1, // 边框宽度
        padding: [5, 10], // 内边距
        textStyle: {
          color: '#333' // 文字颜色
        },
        formatter: function(params) {
          return `<div>
            <p style="font-size: 14px; font-weight: bold;">人数</p>
            <p style="display: flex; align-items: center;">
              <span style="display: inline-block; width: 8px; height: 8px; background-color: #fdcb6e; border-radius: 50%; margin-right: 5px;"></span>
              ${params.name} &nbsp;&nbsp;&nbsp; <b>${params.value}</b>
            </p>
          </div>`;
        }
      },
      xAxis: {
        type: 'category',
        data: jobsData.value.map(item => item.name)
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: jobsData.value.map(item => item.value),
          type: 'bar',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: '#fdcb6e' }, // 橙色
                { offset: 1, color: '#df6385' } // 粉红色
              ]
            )
          }
        }
      ]
    };
    
    jobsChart.setOption(option);
  }
};

// 初始化饼图
const initPieChart = () => {
  if (pieChartContainer.value && genderData.value.length > 0) {
    pieChart = echarts.init(pieChartContainer.value);
    
    const pieOption = {
      title: {
        text: '员工性别统计',
        textStyle: {
          fontSize: 20,
          fontWeight: 'bold'
        },
        left: 'center',
        top: 10
      },
      tooltip: {
        trigger: 'item',
        formatter: function(params) {
          return `<div>
            <p style="font-size: 14px; font-weight: bold;">性别</p>
            <p style="display: flex; align-items: center;">
              <span style="display: inline-block; width: 8px; height: 8px; background-color: ${params.color}; border-radius: 50%; margin-right: 5px;"></span>
              ${params.name} &nbsp;&nbsp;&nbsp; <b>${params.value}</b>
            </p>
          </div>`;
        }
      },
      legend: {
        orient: 'horizontal', // 更改为水平排列
        top: '10%',           // 调整图例的位置
        left: 'center'
      },
      series: [
        {
          name: '性别',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: genderData.value
        }
      ]
    };

    pieChart.setOption(pieOption);
  }
};

// 监听数据变化，更新图表
watch(jobsData, () => {
  if (jobsChart) {
    jobsChart.setOption({
      xAxis: {
        data: jobsData.value.map(item => item.name)
      },
      series: [
        {
          data: jobsData.value.map(item => item.value)
        }
      ]
    });
  } else {
    initJobsChart();
  }
});

watch(genderData, () => {
  if (pieChart) {
    pieChart.setOption({
      series: [
        {
          data: genderData.value
        }
      ]
    });
  } else {
    initPieChart();
  }
});

onMounted(async () => {
  // 初始化图表
  initJobsChart();
  initPieChart();
  
  // 获取职位统计数据
  let result = await queryJobCountApi();
  if (result.code) {
    // 根据API返回的数据格式处理数据
    const jobList = result.data.jobList;
    const dataList = result.data.dataList;
    
    // 将两个数组合并为jobsData需要的格式
    jobsData.value = jobList.map((job, index) => {
      return {
        name: job,
        value: dataList[index]
      };
    });
  }
  
  // 获取性别统计数据
  result = await queryGenderCountApi();
  if (result.code) {
    genderData.value = result.data;
  }
});
</script>

<template>
  <div style="display: flex; justify-content: flex-start; gap: 0;">
    <!-- 原始柱状图 -->
    <div ref="chartContainer" style="width: 1300px; height: 600px;"></div>
    
    <!-- 分隔线 -->
    <div style="width: 1px; height: 600px; background-color: #e0e0e0;"></div>
    
    <!-- 新增饼图 -->
    <div ref="pieChartContainer" style="width: 1000px; height: 600px;"></div>
  </div>
</template>

<style scoped>
</style>